<html lang="en">

<head>
  <style>
    html {
      font-family: -apple-system, system-ui, BlinkMacSystemFont, "Segoe UI", Roboto
    }

    html,
    body {
      width: 100vw;
      height: 100vh;
      display: flex;
      background-color: rgb(54, 50, 119);
      align-items: center;
      justify-content: center;
      color: #fafafa;
    }

    .loading {
      text-align: center;
    }
  </style>

</head>

<body>
  <div class="loading">
    <div>
      <img
        src="" />
      <img
        src="" />
    </div>
    <h3>Loading &laquo; modal - focus &raquo; demo</h3>
  </div>
  <form id="mainForm" method="post" action="https://stackblitz.com/run?file=app/modal-focus.ts" target="_self">
    <input type="hidden" name="project[template]" value="angular-cli">
    <input type="hidden" name="project[title]" value="ng-bootstrap - Modal - Focus">
    <input type="hidden" name="project[description]"
      value="Example usage of the modal widget from https://ng-bootstrap.github.io">
    <input type="hidden" name="project[dependencies]" value="{&#34;@angular/core&#34;:&#34;~12.0.5&#34;,&#34;@angular/common&#34;:&#34;~12.0.5&#34;,&#34;@angular/compiler&#34;:&#34;~12.0.5&#34;,&#34;@angular/platform-browser&#34;:&#34;~12.0.5&#34;,&#34;@angular/platform-browser-dynamic&#34;:&#34;~12.0.5&#34;,&#34;@angular/router&#34;:&#34;~12.0.5&#34;,&#34;@angular/forms&#34;:&#34;~12.0.5&#34;,&#34;@angular/localize&#34;:&#34;~12.0.5&#34;,&#34;@ng-bootstrap/ng-bootstrap&#34;:&#34;10.0.0&#34;,&#34;core-js&#34;:&#34;^2&#34;,&#34;rxjs&#34;:&#34;~6.5.5&#34;,&#34;zone.js&#34;:&#34;~0.11.4&#34;}">
    
    <input type="hidden" name="project[tags][]" value="angular">
    
    <input type="hidden" name="project[tags][]" value="bootstrap">
    
    <input type="hidden" name="project[tags][]" value="ng-bootstrap">
    
    <input type="hidden" name="project[tags][]" value="modal">
    
    
    <input type="hidden" name="project[files][src/polyfills.ts]" value="/**
 * This file includes polyfills needed by Angular and is loaded before the app.
 * You can add your own extra polyfills to this file.
 *
 * This file is divided into 2 sections:
 *   1. Browser polyfills. These are applied before loading ZoneJS and are sorted by browsers.
 *   2. Application imports. Files imported after ZoneJS that should be loaded before your main
 *      file.
 *
 * The current setup is for so-called &#34;evergreen&#34; browsers; the last versions of browsers that
 * automatically update themselves. This includes Safari &gt;= 10, Chrome &gt;= 55 (including Opera),
 * Edge &gt;= 13 on the desktop, and iOS 10 and Chrome on mobile.
 *
 * Learn more in https://angular.io/docs/ts/latest/guide/browser-support.html
 */

/***************************************************************************************************
 * BROWSER POLYFILLS
 */

/** IE9, IE10 and IE11 requires all of the following polyfills. **/
// import &#39;core-js/es6/symbol&#39;;
// import &#39;core-js/es6/object&#39;;
// import &#39;core-js/es6/function&#39;;
// import &#39;core-js/es6/parse-int&#39;;
// import &#39;core-js/es6/parse-float&#39;;
// import &#39;core-js/es6/number&#39;;
// import &#39;core-js/es6/math&#39;;
// import &#39;core-js/es6/string&#39;;
// import &#39;core-js/es6/date&#39;;
// import &#39;core-js/es6/array&#39;;
// import &#39;core-js/es6/regexp&#39;;
// import &#39;core-js/es6/map&#39;;
// import &#39;core-js/es6/set&#39;;

/** IE10 and IE11 requires the following for NgClass support on SVG elements */
// import &#39;classlist.js&#39;;  // Run `npm install --save classlist.js`.

/** IE10 and IE11 requires the following to support `@angular/animation`. */
// import &#39;web-animations-js&#39;;  // Run `npm install --save web-animations-js`.


/** Evergreen browsers require these. **/
import &#39;core-js/es6/reflect&#39;;
import &#39;core-js/es7/reflect&#39;;


/** ALL Firefox browsers require the following to support `@angular/animation`. **/
// import &#39;web-animations-js&#39;;  // Run `npm install --save web-animations-js`.



/***************************************************************************************************
 * Zone JS is required by Angular itself.
 */
import &#39;zone.js&#39;;  // Included with Angular CLI.


/***************************************************************************************************
 * APPLICATION IMPORTS
 */

/**
 * Date, currency, decimal and percent pipes.
 * Needed for: All but Chrome, Firefox, Edge, IE11 and Safari 10
 */
// import &#39;intl&#39;;  // Run `npm install --save intl`.


/**
 * Angular localization polyfill
 */
import &#39;@angular/localize/init&#39;;
">
    
    <input type="hidden" name="project[files][tsconfig.json]" value="{
  &#34;compileOnSave&#34;: false,
  &#34;compilerOptions&#34;: {
    &#34;baseUrl&#34;: &#34;./&#34;,
    &#34;outDir&#34;: &#34;./dist/out-tsc&#34;,
    &#34;sourceMap&#34;: true,
    &#34;declaration&#34;: false,
    &#34;downlevelIteration&#34;: true,
    &#34;experimentalDecorators&#34;: true,
    &#34;module&#34;: &#34;esnext&#34;,
    &#34;moduleResolution&#34;: &#34;node&#34;,
    &#34;importHelpers&#34;: true,
    &#34;target&#34;: &#34;es2015&#34;,
    &#34;typeRoots&#34;: [
      &#34;node_modules/@types&#34;
    ],
    &#34;lib&#34;: [
      &#34;es2018&#34;,
      &#34;dom&#34;
    ]
  },
  &#34;angularCompilerOptions&#34;: {
    &#34;enableIvy&#34;: true,
    &#34;fullTemplateTypeCheck&#34;: true,
    &#34;stricTemplates&#34;: true,
    &#34;strictInjectionParameters&#34;: true
  }
}
">
    
    <input type="hidden" name="project[files][angular.json]" value="{
  &#34;version&#34;: 1,
  &#34;newProjectRoot&#34;: &#34;projects&#34;,
  &#34;projects&#34;: {
    &#34;demo&#34;: {
      &#34;root&#34;: &#34;&#34;,
      &#34;sourceRoot&#34;: &#34;src&#34;,
      &#34;projectType&#34;: &#34;application&#34;,
      &#34;prefix&#34;: &#34;app&#34;,
      &#34;schematics&#34;: {},
      &#34;architect&#34;: {
        &#34;build&#34;: {
          &#34;builder&#34;: &#34;@angular-devkit/build-angular:browser&#34;,
          &#34;options&#34;: {
            &#34;outputPath&#34;: &#34;dist/demo&#34;,
            &#34;index&#34;: &#34;src/index.html&#34;,
            &#34;main&#34;: &#34;src/main.ts&#34;,
            &#34;polyfills&#34;: &#34;src/polyfills.ts&#34;,
            &#34;tsConfig&#34;: &#34;tsconfig.json&#34;,
            &#34;assets&#34;: [
            ],
            &#34;styles&#34;: [
            ],
            &#34;scripts&#34;: []
          },
          &#34;configurations&#34;: {
            &#34;production&#34;: {
              &#34;fileReplacements&#34;: [
                {
                }
              ],
              &#34;optimization&#34;: true,
              &#34;outputHashing&#34;: &#34;all&#34;,
              &#34;sourceMap&#34;: false,
              &#34;extractCss&#34;: true,
              &#34;namedChunks&#34;: false,
              &#34;aot&#34;: true,
              &#34;extractLicenses&#34;: true,
              &#34;vendorChunk&#34;: false,
              &#34;buildOptimizer&#34;: true
            }
          }
        },
        &#34;serve&#34;: {
          &#34;builder&#34;: &#34;@angular-devkit/build-angular:dev-server&#34;,
          &#34;options&#34;: {
            &#34;browserTarget&#34;: &#34;demo:build&#34;
          },
          &#34;configurations&#34;: {
            &#34;production&#34;: {
              &#34;browserTarget&#34;: &#34;demo:build:production&#34;
            }
          }
        },
        &#34;extract-i18n&#34;: {
          &#34;builder&#34;: &#34;@angular-devkit/build-angular:extract-i18n&#34;,
          &#34;options&#34;: {
            &#34;browserTarget&#34;: &#34;demo:build&#34;
          }
        },
        &#34;test&#34;: {
          &#34;builder&#34;: &#34;@angular-devkit/build-angular:karma&#34;,
          &#34;options&#34;: {
            &#34;polyfills&#34;: &#34;src/polyfills.ts&#34;,
            &#34;tsConfig&#34;: &#34;tsconfig.json&#34;,
            &#34;styles&#34;: [
            ],
            &#34;scripts&#34;: [],
            &#34;assets&#34;: [
            ]
          }
        },
        &#34;lint&#34;: {
          &#34;builder&#34;: &#34;@angular-devkit/build-angular:tslint&#34;,
          &#34;options&#34;: {
            &#34;tsConfig&#34;: [
              &#34;tsconfig.json&#34;
            ],
            &#34;exclude&#34;: [
              &#34;**/node_modules/**&#34;
            ]
          }
        }
      }
    }
  },
  &#34;defaultProject&#34;: &#34;demo&#34;
}
">
    
    <input type="hidden" name="project[files][src/index.html]" value="&lt;!DOCTYPE html&gt;
&lt;html&gt;

&lt;head&gt;
  &lt;title&gt;ng-bootstrap modal demo - focus&lt;/title&gt;
  &lt;link rel=&#34;stylesheet&#34;
    href=&#34;https://cdn.jsdelivr.net/npm/bootstrap@4.5.3/dist/css/bootstrap.min.css&#34; /&gt;
  &lt;link rel=&#34;stylesheet&#34; href=&#34;https://cdnjs.cloudflare.com/ajax/libs/prism/1.22.0/themes/prism.css&#34; /&gt;
  &lt;style&gt;
    /* Datepicker popup icon */

button.calendar, button.calendar:active {
  width: 2.75rem;
  background-image: url(&#39;&#39;) !important;
  background-repeat: no-repeat;
  background-size: 23px;
  background-position: center;
}

/* Sortable table demo */

th[sortable] {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

th[sortable].desc:before, th[sortable].asc:before {
  content: &#39;&#39;;
  display: block;
  background: url(&#39;&#39;) no-repeat;
  background-size: 22px;
  width: 22px;
  height: 22px;
  float: left;
  margin-left: -22px;
}

th[sortable].desc:before {
  transform: rotate(180deg);
  -ms-transform: rotate(180deg);
}

/* Filtering table demo */
ngbd-table-filtering span.ngb-highlight {
  background-color: yellow;
}

/* Complete table demo */
ngbd-table-complete span.ngb-highlight {
  background-color: yellow;
}

ngb-carousel .picsum-img-wrapper {
  position: relative;
  height: 0;
  padding-top: 55%; /* Keep ratio for 900x500 images */
}

ngb-carousel .picsum-img-wrapper&gt;img {
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
}

  &lt;/style&gt;
&lt;/head&gt;

&lt;body&gt;
  &lt;div class=&#34;container-fluid&#34;&gt;

    &lt;hr&gt;

    &lt;p&gt;
      This is a demo example forked from the &lt;strong&gt;ng-bootstrap&lt;/strong&gt; project: Angular powered Bootstrap.
      Visit &lt;a href=&#34;https://ng-bootstrap.github.io/&#34; target=&#34;_blank&#34;&gt;https://ng-bootstrap.github.io&lt;/a&gt; for more
      widgets and demos.
    &lt;/p&gt;

    &lt;hr&gt;
    &lt;ngbd-modal-focus&gt;&lt;/ngbd-modal-focus&gt;
  &lt;/div&gt;
&lt;/body&gt;

&lt;/html&gt;
">
    
    <input type="hidden" name="project[files][src/main.ts]" value="import &#39;./polyfills&#39;;

import {platformBrowserDynamic} from &#39;@angular/platform-browser-dynamic&#39;;

import {NgbdModalFocusModule} from &#39;./app/modal-focus.module&#39;;

platformBrowserDynamic()
    .bootstrapModule(NgbdModalFocusModule)
    .then(ref =&gt; {
      // Ensure Angular destroys itself on hot reloads.
      if (window[&#39;ngRef&#39;]) {
        window[&#39;ngRef&#39;].destroy();
      }
      window[&#39;ngRef&#39;] = ref;

      // Otherwise, log the boot error
    })
    .catch(err =&gt; console.error(err));
">
    
    <input type="hidden" name="project[files][src/app/modal-focus.html]" value="&lt;p&gt;First focusable element within the modal window will receive focus upon opening.
This could be configured to focus any other element by adding an &lt;code&gt;ngbAutofocus&lt;/code&gt; attribute on it.&lt;/p&gt;

&lt;pre class=&#34;language-html&#34;&gt;&lt;code class=&#34;language-html&#34;&gt;&lt;span class=&#34;token tag&#34;&gt;&lt;span class=&#34;token tag&#34;&gt;&lt;span class=&#34;token punctuation&#34;&gt;&amp;lt;&lt;/span&gt;button&lt;/span&gt; &lt;span class=&#34;token attr-name&#34;&gt;type&lt;/span&gt;&lt;span class=&#34;token attr-value&#34;&gt;&lt;span class=&#34;token punctuation&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;token punctuation&#34;&gt;&#34;&lt;/span&gt;button&lt;span class=&#34;token punctuation&#34;&gt;&#34;&lt;/span&gt;&lt;/span&gt; &lt;span class=&#34;token attr-name&#34;&gt;ngbAutofocus&lt;/span&gt; &lt;span class=&#34;token attr-name&#34;&gt;class&lt;/span&gt;&lt;span class=&#34;token attr-value&#34;&gt;&lt;span class=&#34;token punctuation&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;token punctuation&#34;&gt;&#34;&lt;/span&gt;btn btn-danger&lt;span class=&#34;token punctuation&#34;&gt;&#34;&lt;/span&gt;&lt;/span&gt;
      &lt;span class=&#34;token attr-name&#34;&gt;(click)&lt;/span&gt;&lt;span class=&#34;token attr-value&#34;&gt;&lt;span class=&#34;token punctuation&#34;&gt;=&lt;/span&gt;&lt;span class=&#34;token punctuation&#34;&gt;&#34;&lt;/span&gt;modal.close(&lt;span class=&#34;token punctuation&#34;&gt;&#39;&lt;/span&gt;Ok click&lt;span class=&#34;token punctuation&#34;&gt;&#39;&lt;/span&gt;)&lt;span class=&#34;token punctuation&#34;&gt;&#34;&lt;/span&gt;&lt;/span&gt;&lt;span class=&#34;token punctuation&#34;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;Ok&lt;span class=&#34;token tag&#34;&gt;&lt;span class=&#34;token tag&#34;&gt;&lt;span class=&#34;token punctuation&#34;&gt;&amp;lt;/&lt;/span&gt;button&lt;/span&gt;&lt;span class=&#34;token punctuation&#34;&gt;&amp;gt;&lt;/span&gt;&lt;/span&gt;&lt;/code&gt;&lt;/pre&gt;

&lt;br /&gt;
&lt;button class=&#34;btn btn-outline-primary mr-2&#34; (click)=&#34;open(&#39;focusFirst&#39;)&#34;&gt;
  &lt;div&gt;Open confirm modal&lt;/div&gt;
  &lt;div class=&#34;text-dark&#34; aria-hidden=&#34;true&#34;&gt;&lt;small&gt;&amp;times; button will be focused&lt;/small&gt;&lt;/div&gt;
&lt;/button&gt;

&lt;button class=&#34;btn btn-outline-primary&#34; (click)=&#34;open(&#39;autofocus&#39;)&#34;&gt;
  &lt;div&gt;Open confirm modal with `ngbAutofocus`&lt;/div&gt;
  &lt;div class=&#34;text-dark&#34; aria-hidden=&#34;true&#34;&gt;&lt;small&gt;Ok button will be focused&lt;/small&gt;&lt;/div&gt;
&lt;/button&gt;

">
    
    <input type="hidden" name="project[files][src/app/modal-focus.module.ts]" value="import { NgModule } from &#39;@angular/core&#39;;
import { BrowserModule } from &#39;@angular/platform-browser&#39;;
import { NgbModule } from &#39;@ng-bootstrap/ng-bootstrap&#39;;

import {
  NgbdModalConfirm,
  NgbdModalConfirmAutofocus,
  NgbdModalFocus
} from &#39;./modal-focus&#39;;

@NgModule({
  imports: [BrowserModule, NgbModule],
  declarations: [NgbdModalFocus, NgbdModalConfirm, NgbdModalConfirmAutofocus],
  exports: [NgbdModalFocus],
  bootstrap: [NgbdModalFocus],
  entryComponents: [NgbdModalConfirm, NgbdModalConfirmAutofocus]
})
export class NgbdModalFocusModule {}
">
    
    <input type="hidden" name="project[files][src/app/modal-focus.ts]" value="import {Component, Type} from &#39;@angular/core&#39;;
import { NgbActiveModal, NgbModal } from &#39;@ng-bootstrap/ng-bootstrap&#39;;

@Component({
  selector: &#39;ngbd-modal-confirm&#39;,
  template: `
  &lt;div class=&#34;modal-header&#34;&gt;
    &lt;h4 class=&#34;modal-title&#34; id=&#34;modal-title&#34;&gt;Profile deletion&lt;/h4&gt;
    &lt;button type=&#34;button&#34; class=&#34;close&#34; aria-describedby=&#34;modal-title&#34; (click)=&#34;modal.dismiss(&#39;Cross click&#39;)&#34;&gt;
      &lt;span aria-hidden=&#34;true&#34;&gt;&amp;times;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class=&#34;modal-body&#34;&gt;
    &lt;p&gt;&lt;strong&gt;Are you sure you want to delete &lt;span class=&#34;text-primary&#34;&gt;&#34;John Doe&#34;&lt;/span&gt; profile?&lt;/strong&gt;&lt;/p&gt;
    &lt;p&gt;All information associated to this user profile will be permanently deleted.
    &lt;span class=&#34;text-danger&#34;&gt;This operation can not be undone.&lt;/span&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&#34;modal-footer&#34;&gt;
    &lt;button type=&#34;button&#34; class=&#34;btn btn-outline-secondary&#34; (click)=&#34;modal.dismiss(&#39;cancel click&#39;)&#34;&gt;Cancel&lt;/button&gt;
    &lt;button type=&#34;button&#34; class=&#34;btn btn-danger&#34; (click)=&#34;modal.close(&#39;Ok click&#39;)&#34;&gt;Ok&lt;/button&gt;
  &lt;/div&gt;
  `
})
export class NgbdModalConfirm {
  constructor(public modal: NgbActiveModal) {}
}

@Component({
  selector: &#39;ngbd-modal-confirm-autofocus&#39;,
  template: `
  &lt;div class=&#34;modal-header&#34;&gt;
    &lt;h4 class=&#34;modal-title&#34; id=&#34;modal-title&#34;&gt;Profile deletion&lt;/h4&gt;
    &lt;button type=&#34;button&#34; class=&#34;close&#34; aria-label=&#34;Close button&#34; aria-describedby=&#34;modal-title&#34; (click)=&#34;modal.dismiss(&#39;Cross click&#39;)&#34;&gt;
      &lt;span aria-hidden=&#34;true&#34;&gt;&amp;times;&lt;/span&gt;
    &lt;/button&gt;
  &lt;/div&gt;
  &lt;div class=&#34;modal-body&#34;&gt;
    &lt;p&gt;&lt;strong&gt;Are you sure you want to delete &lt;span class=&#34;text-primary&#34;&gt;&#34;John Doe&#34;&lt;/span&gt; profile?&lt;/strong&gt;&lt;/p&gt;
    &lt;p&gt;All information associated to this user profile will be permanently deleted.
    &lt;span class=&#34;text-danger&#34;&gt;This operation can not be undone.&lt;/span&gt;
    &lt;/p&gt;
  &lt;/div&gt;
  &lt;div class=&#34;modal-footer&#34;&gt;
    &lt;button type=&#34;button&#34; class=&#34;btn btn-outline-secondary&#34; (click)=&#34;modal.dismiss(&#39;cancel click&#39;)&#34;&gt;Cancel&lt;/button&gt;
    &lt;button type=&#34;button&#34; ngbAutofocus class=&#34;btn btn-danger&#34; (click)=&#34;modal.close(&#39;Ok click&#39;)&#34;&gt;Ok&lt;/button&gt;
  &lt;/div&gt;
  `
})
export class NgbdModalConfirmAutofocus {
  constructor(public modal: NgbActiveModal) {}
}

const MODALS: {[name: string]: Type&lt;any&gt;} = {
  focusFirst: NgbdModalConfirm,
  autofocus: NgbdModalConfirmAutofocus
};

@Component({
  selector: &#39;ngbd-modal-focus&#39;,
  templateUrl: &#39;./modal-focus.html&#39;
})
export class NgbdModalFocus {
  withAutofocus = `&lt;button type=&#34;button&#34; ngbAutofocus class=&#34;btn btn-danger&#34;
      (click)=&#34;modal.close(&#39;Ok click&#39;)&#34;&gt;Ok&lt;/button&gt;`;

  constructor(private _modalService: NgbModal) {}

  open(name: string) {
    this._modalService.open(MODALS[name]);
  }
}
">
    
  </form>
  <script>document.getElementById("mainForm").submit();</script>
</body>

</html>
